<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几个注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        几个注意点：
            1.关于组件名：
                一个单词组成：
                    第一种写法（首字母小写）：school
                    第二种写法（首字母大小）：School
                多个单词组成：
                    第一种写法（kebab-case命名）：my-school
                    第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
                备注：
                    （1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
                    （2）可以使用name配置项指定组件在开发者工具中呈现的名字
            
            2.关于组件标签：
                第一种写法：<school></school>
                第二种写法：<school/>
                备注：不使用脚手架时，<school/>会导致后续组件不能渲染
                        （<school/><school/>，第2个<school/>不会渲染）
            
            3.一个简写方式：
                const school = Vue.extend(options) 可简写成：const school = options
    
    -->
    
    <div id="root">
        <h2>{{msg}}</h2>
        <MySchool></MySchool>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false;

    // 定义组件
    const s = Vue.extend({
        name: 'chenjt',
        template: `
            <div>
                <h2>{{name}}</h2>    
                <h2>{{address}}</h2>    
            </div>
        `,
        data(){
            return {
                name: 'chenjt',
                address: 'address'
            }
        }
    })

    /**
     * 组件声明简写形式（其实也是调用了Vue.extend方法，在vue.js中的function extend里写debugger，
     * 刷新页面发现会进入该debugger，验证了不写Vue.extend也是会调用该function的）
     **/
    // const s = {
    //     name: 'chenjt',
    //     template: `
    //         <div>
    //             <h2>{{name}}</h2>    
    //             <h2>{{address}}</h2>    
    //         </div>
    //     `,
    //     data(){
    //         return {
    //             name: 'chenjt',
    //             address: 'address'
    //         }
    //     }
    // }


    new Vue({
        el: '#root',
        data: {
            msg:'hello'
        },
        components: {
            MySchool: s
        }
    })



</script>

</html>